<template>
  <div class="view-account min-h-screen flex items-center justify-end px-4 sm:px-6 lg:px-8 relative overflow-hidden">
    <div class="absolute top-4 sm:top-6 left-4 sm:left-8 z-10 flex items-center gap-2">
      <img :src="websiteConfig.logo" alt="系统Logo" class="w-8 sm:w-10 h-8 sm:h-10 object-contain" />
      <span class="text-lg sm:text-xl font-bold">{{ websiteConfig.title }}</span>
    </div>

    <div class="view-account-background absolute inset-0 pointer-events-none z-0"></div>

    <div
      class="view-account-container w-full max-w-md sm:max-w-lg mx-auto sm:mx-0 bg-white/95 backdrop-blur-md rounded-xl shadow-lg p-6 sm:p-8 border border-white/20 animate__animated animate__fadeInDown transition-all duration-300 hover:shadow-xl hover:-translate-y-1 z-10 mt-8 sm:mt-16 lg:mt-24">
      <div class="view-account-top text-center mb-8">
        <div class="view-account-top-logo font-bold text-2xl sm:text-3xl text-gray-800 mb-2">欢迎登录系统</div>
        <div class="view-account-top-desc text-gray-500 text-sm sm:text-base">{{ websiteConfig.loginDesc }}</div>
      </div>

      <div class="view-account-form">
        <n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules" class="login-form">
          <n-form-item path="username" class="username-item mb-6">
            <n-input v-model:value="formInline.username" placeholder="请输入用户名" class="login-input w-full">
              <template #prefix>
                <n-icon size="18" color="#808695">
                  <PersonOutline />
                </n-icon>
              </template>
            </n-input>
          </n-form-item>

          <n-form-item path="password" class="password-item mb-4">
            <n-input v-model:value="formInline.password" type="password" showPasswordOn="click" placeholder="请输入密码"
              class="login-input w-full">
              <template #prefix>
                <n-icon size="18" color="#808695">
                  <LockClosedOutline />
                </n-icon>
              </template>
            </n-input>
          </n-form-item>

          <n-form-item class="remember-forgot mb-6">
            <div class="flex justify-between items-center w-full">
              <div class="left">
                <n-checkbox v-model:checked="autoLogin" class="text-gray-600">记住密码</n-checkbox>
              </div>
            </div>
          </n-form-item>

          <n-form-item>
            <n-button @click="handleSubmit" color="#45B4E8" size="large" :loading="loading" block
              class="login-button h-11 text-base">
              登录
            </n-button>
          </n-form-item>
        </n-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user';
import { useMessage } from 'naive-ui';
import { ResultEnum } from '@/enums/httpEnum';
import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5';
import { PageEnum } from '@/enums/pageEnum';
import { websiteConfig } from '@/config/website.config';

// 页面挂载后聚焦用户名输入框
onMounted(() => {
  setTimeout(() => {
    const usernameInput = document.querySelector('input[placeholder="请输入用户名"]');
    usernameInput && (usernameInput as HTMLElement).focus();
  }, 500);
});

// 类型定义
interface FormState {
  username: string;
  password: string;
}

// 响应式变量
const formRef = ref();
const message = useMessage();
const loading = ref(false);
const autoLogin = ref(true);
const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;

// 表单数据
const formInline = reactive<FormState>({
  username: '',
  password: ''
});

// 表单校验规则
const rules = {
  username: { required: true, message: '请输入用户名', trigger: 'blur' },
  password: { required: true, message: '请输入密码', trigger: 'blur' }
};

// 路由与状态管理
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();

// 登录提交处理
const handleSubmit = (e: Event) => {
  e.preventDefault();
  formRef.value.validate(async (errors: any) => {
    if (!errors) {
      const { username, password } = formInline;
      message.loading('登录中...');
      loading.value = true;

      try {
        const { code, message: msg } = await userStore.login({ username, password });
        message.destroyAll();

        if (code === ResultEnum.SUCCESS) {
          const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
          message.success('登录成功，即将进入系统');
          router.replace(route.name === LOGIN_NAME ? '/' : toPath);
        } else {
          message.info(msg || '登录失败');
        }
      } finally {
        loading.value = false;
      }
    } else {
      message.error('请填写完整登录信息');
    }
  });
};
</script>

<style lang="less" scoped>
// 核心：页面背景（CSS中引入背景图，渐变色作为降级）
.view-account {
  background: url('@/assets/images/loginBg.png') center center no-repeat;
  background-size: cover;
}

// 背景装饰元素（叠加在背景图上，增加层次感）
.view-account-background {
  background: rgba(240, 242, 245, 0.4); // 降低遮罩透明度，避免遮挡背景图细节

  .line {
    position: absolute;
    background: linear-gradient(90deg, rgba(45, 140, 240, 0.2), rgba(0, 129, 255, 0.1));

    &-1 {
      width: 300px;
      height: 2px;
      top: 15%;
      right: 5%;
      transform: rotate(-30deg);
      animation: pulse 8s ease-in-out infinite;
    }

    &-2 {
      width: 200px;
      height: 2px;
      bottom: 20%;
      left: 10%;
      transform: rotate(45deg);
      animation: pulse 6s ease-in-out infinite 1s;
    }

    &-3 {
      width: 150px;
      height: 2px;
      top: 40%;
      left: 5%;
      transform: rotate(-15deg);
      animation: pulse 7s ease-in-out infinite 2s;
    }
  }

  .square {
    position: absolute;

    &-1 {
      width: 80px;
      height: 80px;
      top: 10%;
      left: 15%;
      background: linear-gradient(45deg, rgba(45, 140, 240, 0.15), rgba(0, 129, 255, 0.05));
      transform: rotate(30deg);
      animation: rotate 15s linear infinite;
    }

    &-2 {
      width: 60px;
      height: 60px;
      bottom: 15%;
      right: 10%;
      border: 2px solid rgba(45, 140, 240, 0.1);
      background: transparent;
      animation: rotate 12s linear infinite reverse;
    }
  }

  .triangle {
    position: absolute;
    bottom: 30%;
    right: 20%;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 80px solid rgba(45, 140, 240, 0.08);
    animation: float 10s ease-in-out infinite;
  }

  .wave {
    position: absolute;
    opacity: 0.3;
    transform-origin: bottom left;

    &-1 {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 120px;
      background: url('');
      background-size: 100% 120px;
      animation: wave-left-to-right 15s ease-in-out infinite;
      transform: rotate(-2deg);
    }

    &-2 {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100px;
      background: url('');
      background-size: 100% 100px;
      animation: wave-left-to-right 18s ease-in-out infinite;
      animation-delay: -5s;
      transform: rotate(-1deg);
    }

    &-3 {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 80px;
      background: url('');
      background-size: 100% 80px;
      animation: wave-left-to-right 20s ease-in-out infinite;
      animation-delay: -2s;
    }
  }
}

// 动画定义
@keyframes pulse {
  0% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.6;
  }

  100% {
    opacity: 0.3;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes wave-left-to-right {
  0% {
    background-position-x: 0;
    background-position-y: 100%;
  }

  50% {
    background-position-x: 720px;
    background-position-y: 50%;
  }

  100% {
    background-position-x: 1440px;
    background-position-y: 0%;
  }
}

// 表单输入框样式
.login-input {
  :deep(.n-input-wrapper) {
    background: #F0F7FF;
    transition: all 0.3s ease;
  }

  &:hover :deep(.n-input-wrapper) {
    box-shadow: 0 0 0 1px rgba(45, 140, 240, 0.2);
  }

  :deep(.n-input__input-el) {
    padding-left: 5px;
  }
}

// 登录按钮样式
.login-button {
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 50%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
  }

  &:focus:not(:active)::after {
    animation: ripple 1s ease-out;
  }
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }

  20% {
    transform: scale(25, 25);
    opacity: 0.3;
  }

  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}

.login-form {
  :deep(.n-form-item-feedback-wrapper) {
    min-height: 18px;
  }

  :deep(.n-input) {
    border-radius: 4px;
  }
}
</style>